<script setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { getCaptchaApi, forgetValidateApi } from '@/apis/user';

//准备一个路由对象
const router = useRouter();


//准备一个和校验项一致的双向绑定数据
const form = ref({
  captcha: '',
})

//准备一个校验规则
const rules = {
  //每一个表单项对应一个数组，数组内可以定义多个对象
  captcha: [
    { required: true, message: '验证码不能为空', trigger: 'blur' },
    { min: 4, max: 4, message: '验证码长度为4位', trigger: 'blur' },
  ],
  agree: [
    {
      //rule是规则，value是当前的值，callback是当值变化时会调用的一个方法
      validator: (rule, value, callback) => {
        value === false ? callback(new Error('请同意用户协议')) : callback()
      },
    }
  ],
}

const captcha = ref(null)
const formEl = ref(null)

const validate = () => {
  //formEl是elementUI的表单对象，validate方法可以校验表单是否合法
  formEl.value.validate(async (valid) => {
    //valid是校验结果，true表示校验通过，false表示校验失败
    if (valid) {
      // 调用登录接口
      try {
        const res = await forgetValidateApi(form.value.captcha, captchaId)

        router.push(`/login/resetPassword/${res.data}`)
      } catch (error) {

      }
    }
  })
}

const captchaId = Math.ceil((Math.random() * 9 + 1) * 1000)



///获取验证码
const getCaptcha = async () => {

  const res = await getCaptchaApi(captchaId)
  //不用.data,就是转化res本身。

  captcha.value = window.URL.createObjectURL(new Blob([res], { type: 'image/png' }))
}

// 验证码刷新
const changeCaptcha = async () => {

  getCaptcha()

}

onMounted(() => {
  // 页面加载完成后，自动获取验证码
  getCaptcha()
})
</script>

<template>

  <div class="title">
    <router-link to="/login/passwordLogin">
      <svg-icon name="zuojiantou"></svg-icon>
    </router-link>
    <h2>忘记密码</h2>
  </div>

  <div class="form">
    <!-- :model 是elementUI的一个属性，把响应式数据form和这个表单关联在一起, :rules 是elementUI的一个属性，把这个from和一个规则对象绑定在一起-->
    <el-form :model="form" :rules="rules" ref="formEl" label-position="right" label-width="60px" status-icon>

      <!-- 验证码 -->
      <el-form-item prop="captcha" label="验证码" label-width="auto" class="codeInput">
        <el-input v-model="form.captcha" placeholder="请输入验证码" size="large" />
        <img :src="captcha" @click="changeCaptcha" class="codeImg">
      </el-form-item>

      <el-button size="large" class="subBtn" @click="validate">下一步</el-button>
    </el-form>

  </div>



</template>

<style lang='scss' scoped>
.title {
  font-size: 2rem;
  display: flex;
  align-items: center;
  margin-bottom: 30px;

  & h2 {
    margin: 0 auto;
  }
}


.form {

  .subBtn {
    margin-top: 50px;
    width: calc(100% - 20px);
    margin-left: 20px;
    background-color: rgb(255, 98, 0);
    color: white;
  }

  .codeBtn {
    position: absolute;
    right: 10px;
    background-color: white;

    & button {
      color: rgb(255, 98, 0)
    }
  }







  @media screen and (min-width: 768px) {

    .codeInput {
      position: relative;

      .codeImg {
        position: absolute;
        right: 0;
        top: 50px;

        &:hover {
          cursor: pointer;
        }
      }
    }



    .login-box {
      border-radius: 15px;
      height: 60vh;
      width: 50rem;
      margin: 15vh auto;



    }
  }

  @media screen and (max-width: 767px) {
    .login-box {
      height: 100vh;
      width: 100vw;
      // margin: 15vh auto;
      background-color: rgba(255, 255, 255, 1);
    }
  }


}
</style>
